import React from 'react'
// import React, { Component } from 'react'
import {
  TouchableOpacity,
  // ActivityIndicator,
  Text,
  View
} from 'react-native'
import PropTypes from 'prop-types'

import StyleSheet from '../../utils/rzStyleSheet'

import BaseComponent from '../../components/common/baseComponent'

import RzLoading from './rzLoading'

const styles = StyleSheet.create({
  button: {
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    justifyContent: 'center',
    borderRadius: 10,
    backgroundColor: '#d7bd5b'
  },
  title: {
    // flex: 1,
    fontSize: 18,
    textAlign: 'center',
    backgroundColor: 'transparent'
  },
  // spinner: {
  //   marginRight: 20,
  //   alignSelf: 'center'
  // },
  opacity: {
    opacity: 0.7
  }
})

class Button extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'Button'

    this.renderInnerView = this.renderInnerView.bind(this)
  }

  renderInnerView () {
    const {
      isloading,
      hasActivity,
      style,
      // activityIndicatorColor,
      titleStyle,
      allowFontScaling,
      buttonTitle
    } = this.props
    // <View style={[styles.button, styles.opacity, style]}>
    //   {hasActivity ? <ActivityIndicator
    //     animating
    //     size='small'
    //     style={styles.spinner}
    //     color={activityIndicatorColor}
    //   /> : null}
    //   <Text
    //     style={[styles.title, titleStyle]}
    //     allowFontScaling={allowFontScaling}
    //   >
    //     {buttonTitle}
    //   </Text>
    // </View>
    // {hasActivity ? <RzLoading
    //   loadingWH={28}
    //   style={{ marginRight: 20 }}
    // /> : null}
    if (isloading) {
      return (
        <View style={[styles.button, styles.opacity, style]}>
          {hasActivity ? <RzLoading
            style={{ marginRight: 10 }}
            loadingWH={28}
          /> : null}
          <Text
            style={[styles.title, titleStyle]}
            allowFontScaling={allowFontScaling}
          >
            {buttonTitle}
          </Text>
        </View>
      )
    } else {
      return (
        <View style={[styles.button, style]}>
          <Text
            style={[styles.title, titleStyle]}
            allowFontScaling={allowFontScaling}
          >
            {buttonTitle}
          </Text>
        </View>
      )
    }
  }

  render () {
    return (
      <TouchableOpacity
        onPress={this.props.onPress}
        disabled={this.props.isloading || this.props.disabled}
      >
        {this.renderInnerView()}
      </TouchableOpacity>
    )
  }
}

Button.propTypes = {
  onPress: PropTypes.func.isRequired,
  buttonTitle: PropTypes.string.isRequired,
  activityIndicatorColor: PropTypes.string,
  titleStyle: PropTypes.object,
  isloading: PropTypes.bool,
  disabled: PropTypes.bool,
  allowFontScaling: PropTypes.bool,
  hasActivity: PropTypes.bool
}

Button.defaultProps = {
  activityIndicatorColor: 'white',
  disabled: false,
  allowFontScaling: true,
  hasActivity: true,
  isloading: false
}

export default Button
